<template>
<div class="chooser-component">
	<ul class="chooser-list">
		<li v-for="(item,index) in banks" @click="chooseSelection(index)" :title="item.babel" :class="[item.name,{active: index === nowIndex}]"></li>
	</ul>
</div>
</template>
<script>
import Dialog from './base/dialog'
export default {

	data() {
		return {
			nowIndex: 0,
			banks: [{
					id: 201,
					label: '招商银行',
					name: 'zhaoshang'
				},
				{
					id: 301,
					label: '中国建设银行',
					name: 'jianshe'
				},
				{
					id: 601,
					label: '浦发银行',
					name: 'pufa'
				},
				{
					id: 1101,
					label: '交通银行',
					name: 'jiaotong'
				},
				{
					id: 101,
					label: '中国工商银行',
					name: 'gongshang'
				},
				{
					id: 401,
					label: '中国农业银行',
					name: 'nongye'
				},
				{
					id: 1201,
					label: '中国银行',
					name: 'zhongguo'
				},
				{
					id: 501,
					label: '中信银行',
					name: 'zhongxin'
				}
			]
		}
	},
	methods: {
		chooseSelection (index){
			this.nowIndex = index;
			this.$emit('on-change',this.banks[index])
		}
	}
}
</script>

<style scoped>
.chooser-component {
	position: relative;
	display: inline-block;
}

.chooser-list li.active {
	border: 1px solid #4fc08d;
}

.chooser-list li {
	display: inline-block;
	width: 117px;
	height: 32px;
	background-image: url(../assets/banks/banks.png);
	background-repeat: no-repeat;
	margin: 5px;
	border: 1px solid #e3e3e3;
	cursor: pointer;
}

.zhaoshang {
	background-position: -2160px 0;
}

.jianshe {
	background-position: -720px 0;
}

.pufa {
	background-position: -1800px 0;
}

.jiaotong {
	background-position: -3120px 0;
}

.minsheng {
	background-position: -2760px 0;
}

.pingan {
	background-position: -2400px 0;
}

.beijing {
	background-position: -960px 0;
}

.xingye {
	background-position: 0 0;
}

.shanghai {
	background-position: -1560px 0;
}

.guangfa {
	background-position: -840px 0;
}

.gongshang {
	background-position: -2640px 0;
}

.nongye {
	background-position: -1680px 0;
}

.guangda {
	background-position: -2280px 0;
}

.zhongguo {
	background-position: -2520px 0;
}

.zhongxin {
	background-position: -480px 0;
}

.chuxu {
	background-position: -120px 0;
}

.bnongshang {
	background-position: -1440px 0;
}

.huaxia {
	background-position: -2040px 0;
}

.snongshang {
	background-position: -2880px 0;
}

.baifubao {
	background-position: -1320px 0;
}
</style>
